<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app';
import ArrowLeft from '@/common/ArrowLeft.vue';

const id = ref('');
const title = ref('');
const scores = ref(3);


onLoad((option) => {
  console.log('option', option);
  id.value = option.id;
  title.value = option.name;
});

const leftClick = () => {
  uni.navigateBack()
};

const bookImg = [
  {
    id: 1,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '百年孤独',
    author: '马尔克斯'
  },
  {id: 2, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '活着', author: '余华'},
  {
    id: 3,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '小王子',
    author: '圣埃克苏佩里'
  },
  {
    id: 4,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '挪威的森林',
    author: '村上春树'
  },
  {
    id: 5,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '红楼梦',
    author: '曹雪芹'
  },
  {id: 6, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '围城', author: '钱钟书'},
  {id: 7, image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg', name: '三体', author: '刘慈欣'},
  {
    id: 8,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '1984',
    author: '乔治·奥威尔'
  },
  {
    id: 9,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '白夜行',
    author: '东野圭吾'
  },
  {
    id: 10,
    image: 'https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg',
    name: '追风筝的人',
    author: '卡勒德·胡赛尼'
  }
];

</script>
<template>
  <fui-nav-bar :isFixed="true" :isOccupy="true" :title="title" size="16" @leftClick="leftClick">
    <fui-icon name="arrowleft" size="48"></fui-icon>
  </fui-nav-bar>
  <view class="AI-book-item">
    <view style="width: 100%;margin: 20rpx;">
      <fui-section :size="52" color="rgba(18, 134, 140, 1)" title="热门电子书"></fui-section>
    </view>
    <view class="book-item-content">
      <image class="item-image" src="https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg"/>
      <view class="item-content">
        <view class="content-title">{{ title }}</view>
        <view class="content-athor">作者：刘同</view>
        <fui-rate :score="scores" :size="24" allowHalf></fui-rate>
        <view class="item-price">
          <view style="font-size: 24rpx;font-weight: 600;">￥</view>
          <view style="font-size: 48rpx;font-weight: 600;">52.00</view>
        </view>
        <fui-button :bold="true" :size="28" background="linear-gradient(to right, #7ae5ea, #2a979c)" height="88rpx"
                    width="240rpx">立即购买
        </fui-button>
      </view>
    </view>
    <view class="book-content-text">
      《等一切风平浪静》是一部温柔而深刻的作品，讲述了主角在人生风浪中寻觅内心平静与自我救赎的旅程。书中细腻描绘了人物情感的起伏与成长，教会读者在生活的波澜中学会等待与坚持，最终迎来心灵的宁静与释怀。
    </view>
    <view style="width: 100%;">
      <ArrowLeft arrowText="查看更多" iconName="arrowright" title="推荐好书" @arrow-click="handleArrowClick1"/>
    </view>
    <view class="book-img-box">
      <scroll-view :scroll-with-animation="true" class="scroll-item-book" scroll-x>
        <view v-for="(item, index) in bookImg" :key="index" class="scroll-item-img" @click="bookTopClick(item)">
          <view class="book-img-item">
            <image :src="item.image" class="book-item-image"/>
            <view class="book-name">{{ item.name }}</view>
            <view class="book-author">作者：{{ item.author }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view style="width: 100%;">
      <ArrowLeft arrowText="查看更多" iconName="arrowright" title="推荐好书" @arrow-click="handleArrowClick1"/>
    </view>
    <view class="book-content">
      <fui-grid :showBorder="false" :square="false">
        <fui-grid-item v-for="(item, index) in bookImg" :key="index">
          <view class="fui-grid__cell fui-padding" style="margin: 15rpx;">
            <image :src="item.image" class="connt-image"/>
            <view class="connt-top">{{ item.name }}</view>
            <view class="connt-bot">作者：{{ item.author }}</view>
          </view>
        </fui-grid-item>
      </fui-grid>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.AI-book-item {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .book-item-content {
    margin: 20rpx;
    width: 670rpx;
    height: 426.66rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item-image {
      width: 320rpx;
      height: 426.66rpx;
      border-radius: 38.4rpx;
    }

    .item-content {
      width: 310rpx;
      height: 426.66rpx;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;

      .content-title {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .content-athor {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(18, 134, 140, 1);
      }

      .item-price {
        width: 144rpx;
        display: flex;
        color: rgba(18, 134, 140, 1);
        align-items: center;
      }
    }
  }

  .book-content-text {
    margin: 10rpx;
    width: 670rpx;
    height: 192rpx;
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 2rpx;
    color: rgba(66, 66, 66, 1);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .book-img-box {
    margin: 20rpx;
    width: 100%;
    height: 418rpx;

    .scroll-item-book {
      white-space: nowrap;

      .scroll-item-img {
        width: 240rpx;
        height: 418rpx;
        display: inline-block;
        margin-right: 20rpx;

        .book-img-item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          .book-item-image {
            width: 240rpx;
            height: 320rpx;
            border-radius: 28.8rpx;
            overflow: hidden;
          }

          .book-name {
            font-weight: 600;
            font-size: 28rpx;
            color: rgba(18, 134, 140, 1);
          }

          .book-author {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
  }

  .book-content {
    margin: 20rpx;
    width: 100%;

    .fui-grid__cell {
      .connt-image {
        width: 210rpx;
        height: 280rpx;
        border-radius: 26rpx;
        overflow: hidden;
      }

      .connt-top {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .connt-bot {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
</style>